<!-- HTML案例实现 -->
<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Project1</title>
</head>

<body>
	<table border="1" width="100%">
		<!-- Logo图片 -->
		<tr>
			<td colspan="3">
				<p align="center"><img border="0" src="src/logo.gif" width="100%" /></p>
			</td>
		</tr>
		<!-- 第二行 -->
		<tr>
			<td width=20%>
				<table border="1" width="100%" cellspacing="0" cellpadding="0">
					<tr>
						<td>
							<p>《礼记·大学》名句</p>
							<ol>
								<li><em>修身</em></li>
								<li><strong>齐家</strong></li>
								<li>治国</li>
								<li>平天下</li>
							</ol>
						</td>
					</tr>
				</table>
			</td>

			<td width=25%>
				<table border="0" width="100%" cellspacing="0" cellpadding="0">
					<tr>
						<td colspan="2">
							<h2 align="center">诗词欣赏</h2>
						</td>
					</tr>
					<tr>
						<td>
							<img border="0" src="src/jys.jpg" width="220" />
						</td>
						<td>
							<pre>
								<font size="6">
  静夜思
床前明月光，
疑似地上霜。
举头望明月，
低头思故乡。
								</font>
							</pre>
						</td>
					</tr>
				</table>
			</td>

			<td width=55%>
				<table border="0" width="100%" cellspacing="0" cellpadding="0">
					<tr>
						<p align="center">
							<h3 align="center">纪晓岚家书</h3>
							<hr />
						</p>
					</tr>
					<tr>
						<td>
							<p>
								&nbsp;&nbsp;纪昀（1724-1805），字晓岚，一字春帆，晚号石云，道号观弈道人，直隶献县（今中国河北献县）人。生于清雍正二年（1724）六月份，卒于嘉庆十年（1805）二月，历雍正、乾隆、嘉庆三朝，享年八十二岁。
							</p>
							<p>
								&nbsp;&nbsp;四岁开始启蒙读书，十一岁随父入京，二十一岁中秀才，三十一岁考中进士，官至礼部尚书、协办大学士，曾任《四库全书》总纂修官，撰写了《四库全书总目提要》。
							</p>
							<p>
								&nbsp;&nbsp;因其“敏而好学可为文，授之以政无不达”（嘉庆帝御赐碑文），故卒后谥号文纪昀祖籍为应天府上元县，传其家为纪家边。</p>
							<p>
								&nbsp;&nbsp;明永乐二年（1404年），奉命“迁大姓实畿辅”（乾隆《献县志》），人称茶星始迁来献县，入安民里四甲籍，卜居献县城东九十里之景城镇。到纪晓岚，北迁已十四世。有据可考，纪晓岚为纪容舒次子，他就是出生于这样一个世代书香门第。
							</p>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<!-- 第三行 -->
		<tr>
			<td>
				<table border="1" width="100%">
					<tr>
						<td>
							<p>中国四大名著</p>
							<ul>
								<li>
									<a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/5723">西游记</a>
								</li>
								<li>
									<a href="https://baike.baidu.com/item/%E6%B0%B4%E6%B5%92%E4%BC%A0/348">水浒传</a>
								</li>
								<li>
									<a
										href="https://baike.baidu.com/item/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89/5782">三国演义</a>
								</li>
								<li>
									<a href="https://baike.baidu.com/item/%E7%BA%A2%E6%A5%BC%E6%A2%A6/15311">红楼梦</a>
								</li>
							</ul>
						</td>
					</tr>
				</table>
			</td>

			<td>
				<table border="1" width="100%" cellspacing="0" cellpadding="0">
					<tr>
						<td>
							<p align="center">音乐欣赏</p>
						</td>

					</tr>

					<tr>
						<td>
							<p align="center">
								<audio src="src/1.mp3" controls="controls">您的浏览器不支持audio标签</audio>
							</p>
						</td>
					</tr>
				</table>
			</td>

			<td>
				<table border="1" width="100%" cellspacing="0" cellpadding="0">
					<tr>
						<td>
							<p align="center">视频欣赏</p>
						</td>
					</tr>

					<tr>
						<td>
							<p align="center">
								<video src="src/2.mkv" controls="controls">您的浏览器不支持video标签</video>
							</p>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>

</html>